/** @jsxImportSource @emotion/react */
import {  Global } from "@emotion/react";
import * as React from "react";
import {
    Button,InputLine, CheckSwitch,
    IconCheckSquare, IconSquare, Input, InputDatalist, SuffixInput,
    TextArea, Layer,  useTheme,
    LineColumn, useReferenceWidth,
} from "customize-easy-ui-component";
import queryString from "query-string";
import {useContext, useInsertionEffect, useRef, useState} from "react";
import {UserContext} from "../routing/UserContext";
import {EditStorageContext, useEditStorageContext} from "../report/StorageContext";
import {InspectRecordLayout, InternalItemProps, useItemInputControl} from "../report/common/base";
import {useMedia,} from "use-media";


const daL改造内容=[['改变主要受力结构件的结构形式','改结构形'],['改变主要机构的配置形式','改配置形'],['改变主参数','改主参']];
const 改造内容={
    view:(orc:any)=>{
        return <div css={{display: 'flex',flexDirection: 'column',alignItems: 'flex-start'}}>
            { daL改造内容.map(([desc,name] : any, i:number)=> {
                return <div key={i} css={{display: 'flex',alignItems: 'center'}}>{orc?.[name]? <IconCheckSquare size='sm'/> : <IconSquare size='sm'/>}&nbsp;{desc}。</div>;
            }) }
        </div>
    },
    edit:(inp:any,setInp:(a:any)=>void)=>{
        return <div  key={999} css={{flex: '1 1 50%'}}>
            { daL改造内容.map(([desc,name] : any, i:number)=> {
                return <InputLine key={i} label={`${desc}:`}>
                    <CheckSwitch  checked={inp?.[name] || false} onChange={e => setInp({...inp, [name]: inp?.[name]? undefined:true}) } />
                </InputLine>;
            }) }
        </div>
    }
};
const daL重大修理内容=[['更换主要受力结构件','换结构件'],['更换主要机构','换机构'],['更换控制系统','换控制']];
const 重大修理内容={
    view:(orc:any)=>{
        return <div css={{display: 'flex',flexDirection: 'column',alignItems: 'flex-start'}}>
            { daL重大修理内容.map(([desc,name] : any, i:number)=> {
                return <div key={i} css={{display: 'flex',alignItems: 'center'}}>{orc?.[name]? <IconCheckSquare size='sm'/> : <IconSquare size='sm'/>}&nbsp;{desc}。</div>;
            }) }
        </div>
    },
    edit:(inp:any,setInp:(a:any)=>void)=>{
        return <div key={998} css={{flex: '1 1 50%'}}>
            { daL重大修理内容.map(([desc,name] : any, i:number)=> {
                return <InputLine key={i} label={`${desc}:`}>
                    <CheckSwitch  checked={inp?.[name] || false} onChange={e => setInp({...inp, [name]: inp?.[name]? undefined:true}) } />
                </InputLine>;
            }) }
        </div>
    }
};
const 检验依据={
    edit:(inp:any,setInp:(a:any)=>void)=>{
        return <InputLine  key={997}  label='检验依据：'>
            <InputDatalist value={(inp?.[`检验依据`]) || ''} datalist={['《起重机械安全技术规程》（TSG 51-2023）',]}
                           onListChange={v => {
                               setInp({ ...inp, [`检验依据`]:v || undefined});
                           } } />
        </InputLine>
    }
};
const render下检日={
    view:(orc:any)=>{      //不能用.['下检日期']它是snapshot台账的下检日期，还未没改的。
        const date=new Date(orc?.['新下检日']);
        const year=date.getFullYear()
        const month=date.getMonth()
        return <>{isNaN(year)? ' ' :year}年&nbsp;{isNaN(month)? ` ` :month}月</>
    },
};
/**
 * 不要重名了 ['附设装置名称','附设装置'] 可能莫名其妙报错的。台账snapshot.‘安装单位’等不能直接使用的，要本次最新:易变动。
 * */
export const config设备概况=[
    [['安装改造重大修理单位名称','新安装单']],
    [['施工单位特种设备生产许可证（受理决定书）编号','许可书号'],['安装改造重大修理单位负责人','安装单负']],
    [['施工单位生产许可证许可子项目','施许可子'],['施工单位联系电话','施工联系']],
    [['使用单位名称','_$使用单位']],
    [['使用单位地址','_$使用单位地址']],
    [['分支机构','_$分支机构']],
    [['分支机构地址','_$分支机构地址']],
    [['产权单位名称','_$产权单位']],
    [['产权单位地址','_$产权单位地址']],
    [['使用单位联系人','使单联人'],['使用单位安全管理人员','安全员']],
    [['使用单位联系电话','使单联电'],['安全管理人员联系电话','安全员电']],
    [['使用单位统一社会信用代码','_$使用单位信用码'],['管理部门类型','_$使管部类型']],
    [['制造单位名称','_$制造单位']],
    [['制造单位特种设备生产许可证编号','生产许号'],['制造单位生产许可证许可子项目','制许可子']],
    [['操纵方式',{n:'操纵方式',t:'l',l:['地面操纵','司机室操纵','遥控','多点操纵','其他']}],['作业环境',{n:'作业环境',t:'l',l:['室内','室外','吊运熔融金属','吊运炽热固体','防爆','绝缘']}]],
    [['防爆等级','_$防爆等级'],['进口情况','_$进口类型']],
    [['制造日期','_$制造日期'],['投入使用日期','_$投用日期']],
    [['单位内编号','_$单位内部编号'],['设计使用年限','_$设计使年限']],
    [['使用地点','使用地']],
    [['设备使用地点所在区域','使区域']],
    [['跨度','_$跨度','m'],['额定起重量','_$额定起重量','t']],
    [['起升速度','_$起升速','m/min'],['生产率','_$生产率','t/h']],
    [['起升高度',{n:'起升高度',t:'n',u:'m'}],['工作级别','_$工作级别']],
    [['主起升机构额定起重量',{n:'主起额起',u:'t'}],['副起升机构额定起重量','_$起升副额起','t']],
    [['大车速度','_$大车速度','m/min'],['小车速度','_$小车速度','m/min']],
    [['悬臂端有效长度L1','_$悬臂长1','m'],['悬臂端有效长度L2','_$悬臂长2','m']],
    [['其他主要参数',{n:'其他参数',t:'m'}]],
    [['检验时吊具',{n:'检吊具',t:'l',l:['吊钩','集装箱吊具','抓斗','起重电磁铁','真空吸盘','夹钳','其他']}],['主起升机构起升悬挂部件',{n:'主起悬挂',t:'l',l:['钢丝绳','环链','纤维绳','钢铰线','其他']}]],
    [['检验依据','检验依据',检验依据]],
    [['下次定期检验日期',undefined,render下检日],['是否流动作业',{n:'流动作业',t:'b'}]],
    [['现场检验条件',{r:'见附录13'}],['是否型式试验样机',{n:'型试样机',t:'b'}]],
    [['附设装置名称','附设装']],
    [['重大修理内容','',重大修理内容]],
    [['改造内容','',改造内容]],
    [['备注',{n:'概备注',t:'m'}]],
];
const dbName设备概况 =[] as any;
config设备概况.map(([[desc,name,cb],add2p] : any, i:number)=> {
    const [desc2, name2, cb2] = add2p || [];
    //【关键】名字变体,{n:'型试样机',t:'b'} 对象含义 .t：有几种情况t='b'布尔;='d'日期;='l'列表;默认是Input ,若又有u字段是单位辨识，就是附加后缀的input;另外l字段是文本数组[];r是文本代数据库:替代。t='n'纯数字,’m‘多行备注
    if(typeof name==='string' && !name?.startsWith('_$'))  dbName设备概况.push({name,desc,cb});
    else if(typeof name==='object' && name.n && !name.r)  dbName设备概况.push({name:name.n, desc,cb, type:name.t,unit:name.u,list:name.l});
    if(typeof name2==='string' && name2 && !name2.startsWith('_$'))  dbName设备概况.push({name:name2,desc:desc2,cb:cb2});
    else if(typeof name2==='object' && name2.n && !name2.r)  dbName设备概况.push({name:name2.n, desc:desc2,cb:cb2, type:name2.t,unit:name2.u,list:name2.l});
});

export const DeviceSurvey=
    React.forwardRef((
        { children, show ,alone=true,index,refWidth}: InternalItemProps&{index?:number,refWidth:number},  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            dbName设备概况.forEach(({name}:any, i:number)=> {
                fields[name] =par[name];
            });
            daL改造内容.forEach(([_,name] : any, i:number)=> {
                fields[name] =par[name];
            })
            daL重大修理内容.forEach(([_,name] : any, i:number)=> {
                fields[name] =par[name];
            })
            return fields;
        }, []);
        const {inp, setInp} = useItemInputControl({ ref: null });       //ref变了 因不同用途了!!
        const theme = useTheme();
        console.log("dbName设备概况 ge",dbName设备概况.length);
        return (
            <Layer>
                设备概况除了台账外还需要修改的部分={index}:
                <LineColumn  column={8}>
                    {           /* 剔除最后一个”备注“要单独处理的 */
                        dbName设备概况.map(({name,desc,cb,type,unit,list} : any, i:number)=> {
                            if(i>=dbName设备概况.length-1)      return null;
                            if(cb?.edit){
                                return  cb.edit(inp,setInp);
                            }
                            else if(type==='l') return <InputLine key={i} label={desc}>
                                <InputDatalist value={(inp?.[name]) || ''} datalist={list}
                                               onListChange={v => {
                                                   setInp({ ...inp, [name]:v || undefined});
                                               } } />
                            </InputLine>;
                            else if(type==='d') return  <InputLine key={i} label={desc}>
                                <Input  value={inp?.[name] ||''}  type='date'
                                        onChange={e => setInp({ ...inp, [name]: e.currentTarget.value}) } />
                            </InputLine>;
                            else if(type==='b') return  <InputLine key={i} label={desc}>
                                <CheckSwitch  checked={inp?.[name] || false} onChange={e => setInp({...inp, [name]: inp?.[name]? undefined:true}) } />
                            </InputLine>;
                            else if(type==='m')  return <div key={i}>{desc}:
                                <TextArea  value={inp?.[name] ||''} rows={4}
                                           onChange={e => setInp({ ...inp, [name]: e.currentTarget.value||undefined}) } />
                            </div>;
                            else if(unit) return  <InputLine key={i} label={desc}>
                                <SuffixInput  value={inp?.[name] ||''} onSave={txt=> setInp({...inp,[name]: txt || undefined })}
                                              type={type==='n'? "number": undefined}>{unit}</SuffixInput>
                            </InputLine>;
                            else return  <InputLine label={desc+`:`} key={i}>
                                    <Input  value={inp?.[name] ||''} type={type==='n'? "number": undefined}
                                            onChange={e => {
                                                setInp({...inp,[name]:e.currentTarget.value || undefined});
                                            } } />
                                </InputLine>;
                        })
                    }
                </LineColumn>
                备注：
                <TextArea  value={inp?.概备注 ||''} rows={5}
                           onChange={e => setInp({ ...inp, 概备注: e.currentTarget.value||undefined}) } />
            </Layer>
        );
    } );

interface LoginProps {
}
export const Login =(props: LoginProps)  => {
    const {user, setUser} =useContext(UserContext);
    //我的身份合法吗
    const [isMeUser, setIsMeUser] =React.useState(user!==null);
  const theme = useTheme();
  const qs = queryString.parse(window.location.search);
  const [isRegistering, setIsRegistering] = React.useState(
    typeof qs.register === "string"
  );

    const {call:submitfunc, doing:isInFlight}= {} as any;//useLoginMutation();
    const {call:registerfunc, isInFlight:isload, result:regOK}= {} as any;//useRegisterMutation();
  //const { result:regOK, submit:registerfunc, error:errReg } = useRegisterToServer(form);

    console.log("路由进入 登录伪2页面= isInFlight外部=",isInFlight,"user=",user);
    //都可能无法刷新？ <Redirect  to={from.pathname} />;  setLocation (to: Path, replace?: boolean)
    // React.useEffect(() => {
    //     if(user && !isMeUser)
    //         window.location.href = "/";       //强制刷新页面。
    //     //登录失败的？
    // }, [user,isMeUser]);
    const [tab, setTab] = React.useState(0);
    const tip断开=`"@media print": {pageBreakInside: 'avoid'}`;
    const [分页措施, set分页措施] = React.useState(0);

    const repContext = useEditStorageContext({});
    const [pipe, setPipe] = React.useState<boolean|undefined>(false);
    const [all, setall] = React.useState<boolean|undefined>(false);
    // const ref = useRef<{ openPrintDialog: () => Promise<void> }>();
    const [printDialogOpen, setPrintDialogOpen] = useState(false);
    // const atPrint = useMediaQuery({query: 'print'});      //要打印的
    const atPrint = useMedia('print');
    const {buttonProps, render} ={}as any //useDomPrinter({node:allhtml});

    const [refMyLineC,widthMyLinec]= useReferenceWidth();
  // @ts-ignore
    return (
    <React.Fragment>
        <Global
            styles={{
                html: {
                    [theme.mediaQueries.md]: {
                        // backgroundAttachment: "fixed",
                        // backgroundSize: "cover",
                        // backgroundImage: `url(${backgroundAll}) !important`
                    },
                    scrollbarGutter: 'stable', //解决布局副作用的循环地跳变问题！可能死循环。但是固定的会手机触摸屏的固定预留滚动条的位置?手机小屏幕就没必要做了不会拉拽窗口大小啊。
                    "#root #floormenu": {

                   },
                }
            }}
        />
        <EditStorageContext.Provider
            value={repContext}
        >
                <div ref={refMyLineC}></div>
                <DeviceSurvey  refWidth={widthMyLinec} index={1}/>
                <div css={{
                    display: 'none',
                    "@media print": {
                        display: 'unset',
                    },
                }}>
                    <Button css={{ marginTop: theme.spaces.sm }} size="sm"
                            {...buttonProps}
                    >{'wo我在 打印环境当中的 '}</Button>
                    <DeviceSurvey refWidth={widthMyLinec} index={22}/>
                    <DeviceSurvey refWidth={widthMyLinec} index={3}/>
                    <Button css={{ marginTop: theme.spaces.sm }} size="sm"
                            {...buttonProps}
                    >{'wo我在 打印环境当中的 '}</Button>
                    <DeviceSurvey refWidth={widthMyLinec} index={44}/>
                </div>
                <Button css={{ marginTop: theme.spaces.sm }} size="sm"
                        {...buttonProps}
                >{'结尾的，打印，我在 打印环境当中的：当前是最佳结果了'}</Button>

        </EditStorageContext.Provider>

    </React.Fragment>
  );
};


//用于动态加载，缺省的 [小心错误]function (for composite components) but got: object. Check the render
export default Login;

